{% extends 'adminapp/master.html' %}
{% load static %}
{% block content %}

<div class="pagetitle">
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item active">Dashboard</li>
    </ol>
  </nav>
</div><!-- End Page Title -->

<section class="section dashboard">
  <div class="row">
    <div class="col-lg-20">
      <div class="row d-flex justify-content-center">

        <!-- Total Categories Card -->
        <div class="col-xl-3 col-md-6">
          <div class="card info-card custom-card">
            <div class="card-body">
              <h5 class="card-title">Total Categories</h5>
              <div class="d-flex align-items-center">
                <div class="card-icon">
                  <i class="bi bi-grid"></i>
                </div>
                <div class="ps-3">
                  <h6>{{ total_categories }}</h6>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Total Bicycles Card -->
        <div class="col-xl-3 col-md-6">
          <div class="card info-card custom-card">
            <div class="card-body">
              <h5 class="card-title">Total Bicycle</h5>
              <div class="d-flex align-items-center">
                <div class="card-icon">
                  <i class="bi bi-bicycle"></i>
                </div>
                <div class="ps-3">
                  <h6>{{ total_bikes }}</h6>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Total Stations Card -->
        <div class="col-xl-3 col-md-6">
          <div class="card info-card custom-card">
            <div class="card-body">
              <h5 class="card-title">Total Stations</h5>
              <div class="d-flex align-items-center">
                <div class="card-icon">
                  <i class="bi bi-building"></i>
                </div>
                <div class="ps-3">
                  <h6>{{ total_stations }}</h6>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Total Feedback Card -->
        <div class="col-xl-3 col-md-6">
          <div class="card info-card custom-card">
            <div class="card-body">
              <h5 class="card-title">Total Feedback</h5>
              <div class="d-flex align-items-center">
                <div class="card-icon">
                  <i class="bi bi-chat-square-text"></i>
                </div>
                <div class="ps-3">
                  <h6>{{ total_feedback }}</h6>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Total Users Card -->
        <div class="col-xl-3 col-md-6">
          <div class="card info-card custom-card">
            <div class="card-body">
              <h5 class="card-title">Total Users</h5>
              <div class="d-flex align-items-center">
                <div class="card-icon">
                  <i class="bi bi-people"></i>
                </div>
                <div class="ps-3">
                  <h6>{{ total_user }}</h6>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Total Payment Card -->
        <div class="col-xl-3 col-md-6">
          <div class="card info-card custom-card">
            <div class="card-body">
              <h5 class="card-title">Total Payment</h5>
              <div class="d-flex align-items-center">
                <div class="card-icon">
                  <i class="bi bi-cash-stack"></i>
                </div>
                <div class="ps-3">
                  <h6>{{ total_revenue }}</h6>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-3 col-md-6">
          <div class="card info-card custom-card">
            <div class="card-body">
              <h5 class="card-title">Total Enquiry</h5>
              <div class="d-flex align-items-center">
                <div class="card-icon">
                  <i class="bi bi-person-lines-fill"></i>
                </div>
                <div class="ps-3">
                  <h6>{{ total_enquiry }}</h6>
                </div>
              </div>
            </div>
          </div>
        </div>
        

      </div>
    </div>
  </div>
</section>

<style>
/* Custom Card Styling */
.custom-card {
  border-radius: 30px;
  border: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background: #cecde615;
  padding: 20px 15px;
  text-align: center;
  margin-bottom: 20px;
}

.custom-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.custom-card .card-icon {
  font-size: 2rem;
  color: white;
  background: #5c9bf5;
  padding: 16px;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-card h5 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.custom-card h6 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0d6efd;
}

/* Responsive Styling */
@media (max-width: 992px) {
  .custom-card {
    padding: 15px;
  }
  .custom-card .card-icon {
    font-size: 1.8rem;
    width: 50px;
    height: 50px;
  }
  .custom-card h5 {
    font-size: 0.9rem;
  }
  .custom-card h6 {
    font-size: 1.3rem;
  }
}
</style>

{% endblock %}